{% extends 'base_hx.html' %}
{% block body %}

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
  <legend>数据图表</legend>
</fieldset>

<div class="layui-main site-inline">
<div class="site-content">
<div id="main1" style="width: auto; height: 300px"></div>
<div id="main2" style="width: auto; height: 300px; margin-top: 50px"></div>
</div>
</div>
{% endblock %}

{% block other_js %}
<script src="/static/echarts.min.js"></script>
<script>
layui.use(['fly', 'form', 'layedit', 'laydate'], function(){
    var $ = layui.$
    ,form = layui.form
  ,layer = layui.layer
  ,layedit = layui.layedit
  ,laydate = layui.laydate
  ,fly = layui.fly;

  var myChart1 = echarts.init(document.getElementById('main1'));
  var myChart2 = echarts.init(document.getElementById('main2'));

     $.get('/api/report?category=真身', function(res){
      if(res.status === 0) {
        myChart1.setOption({
            title: {
                text: '真身走势'
            },
            tooltip : {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            yAxis : [
                {
                    type : 'value'
                }
            ],
            legend: {
                x: '50px',
                y: '30px',
                data: res.data.data1.legend
            },
            xAxis: [{
                type: 'category',
                boundaryGap: false,
                data: res.data.data1.x_axis
            }],
            series: res.data.data1.series,
            color:['#F4CB29', '#12e78c','#4B7CF3','red', '#dd3ee5']
        });

        myChart2.setOption({
            title : {
                text: '真身数量',
                subtext: '近3日',
                x:'left'
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                type: 'scroll',
                orient: 'vertical',
                right: 10,
                top: 20,
                bottom: 20,
                data: res.data.data2.legend,
                selected: res.data.data2.selected
            },
            series: [
                {
                    name: '地图',
                    type: 'pie',
                    radius : '55%',
                    center: ['40%', '50%'],
                    data: res.data.data2.series,
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ],
            color:['#F4CB29', '#12e78c','#4B7CF3','red', '#dd3ee5']
        });
      }
    });

});
</script>
{% endblock %}